<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <base href="/ExamMVC/">
    <meta charset="UTF-8">
    <title>在线考试系统</title>
    <script src="js/vue.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/axios.min.js"></script>
    <style>
        *{padding: 0px;margin: 0px}
        #app{
            width:100%;
            height: 50px;
            background-color: #4f7764;
            line-height: 50px;
            display: inline-block;
        }
        h1{
            margin-left: 50px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }
        h1:hover{
            color: yellow;
        }
        #main{
            width: 100%;
            height: 558px;
            background-color: #a7d4c3;
            /*display: inline-block;*/
            position: relative;
        }
        #app a {
            float: left;
            color: white;
            font-size: 20px;
            /*去除超链接的下划线*/
            text-decoration: none;
            padding: 2px 10px;
            line-height: 30px;
        }
        #app .but1,.but2 {
            float: right;
            border: 2px solid rgb(255, 238, 0);
            /*使元素的角变圆*/
            border-radius: 25px;
            padding: 6px 25px;
            margin: 0px 10px;
            display: inline-block;
            cursor: pointer;
        }
        #app .but1,but2 > a {
            color: rgb(255, 238, 0);
        }
        #app .but1 {
            margin-right: 60px;
        }
        #app .but1:hover {
            background-color: rgb(255, 238, 0);
        }
        #app .but2:hover {
            background-color: rgb(255, 238, 0);
        }
        #app .but2:hover a {
            color: rgb(180, 81, 81);
        }
        .optionBox{
            width: 300px;
            height: 557px;
            background-color: #509a80;
            /*border: 1px solid blue;*/
            display: inline-block;
        }
        .optionBox ul{
            list-style: none;
            padding-top: 20px;
            padding-left: 20px;;
            font-size: 20px;
            font-family: SimSun-ExtB;
        }
        .optionBox ul li{
            background-color: #badde9;
            margin: 30px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #bbd69d;
            cursor: pointer;
        }
        .optionBox ul li:hover{
            color: #3d6756;
        }
        .optionBox hr{
            margin-top: 60px;
            border: 4px solid gray;
        }
        .optionPage {
            display: inline-block;
            position: absolute;
            top: 0px;
            right: 50px;
            /*border: 1px solid red;*/
            text-align: center;
            width: 700px;
            height: 477px;
            padding: 70px 40px 10px;
        }
        .optionPage h2{
            padding-bottom: 20px;
        }
        .optionPage p{
            font-size: 18px;
        }
        /*.optionPage:nth-child(2){display:none;}*/
        .optionPage:nth-child(3){display:none;}
        .optionPage:nth-child(4){display:none;}
        .optionPage:nth-child(5){display:none;}
        .optionPage:nth-child(6){display:none;}
        .optionPage input[type='button']{
            position: absolute;
            left: 40px;
            width: 100px;
            height: 28px;
            font-size: 18px;
            color: black;
            background-color: aqua;
            border: none;
            cursor: pointer;
        }
        .optionPage input[type='button']:hover{
            color: white;
            height: 30px;
            width: 102px;
        }
        .optionPage table{
            position: absolute;
            top: 150px;
        }
        .optionPage table tr{
            border: 1px solid black;
            text-align: center;
        }
        .optionPage table tr th,td{
            width: 180px;
            border: 1px solid black;
            text-align: center;
        }
        #addPage{
            /*display: inline-block;*/
            background-color: rgb(2, 236, 204);
            border: 1px solid red;
            font-size: 18px;
            position: absolute;
            top: 200px;
            right: 10px;
            z-index: 100;
            display: none;
        }
        #addPage input{
            text-align: center;
            width: 120px;
            height: 28px;
            margin: 5px 10px 5px;
        }
        #addPage button{
            background-color: blue;
            color: white;
            border: none;
            width: 60px;
            height: 28px;
            margin-right: 10px;
            cursor: pointer;
        }
        #addPage button:hover{
            color: yellow;
        }
        .optionPage .test table{
            background-color: white;
            border: 2px solid #509a80;

        }
        .optionPage .test table th,td{
            text-align: center;
            line-height: 100%;
            padding:5px 0px 5px;

            border: 1px solid #509a80;
        }
        .optionPage .test table td span{
            background-color: red;
            padding: 2px 8px;
            border-radius: 2px;
            cursor: pointer;
        }
        .optionPage .test table td span:hover{
            color: white;
        }
        .optionPage #examPage{
            position: fixed;
            top: 15%;
            width: 460px;
            height: 420px;
            padding: 20px;
            background-color: white;
            display: none;
        }
        .optionPage #examPage div{
            margin: 10px 20px 10px;
            text-align: left;
        }
        .optionPage #examPage h5{
            display: inline-block;
            margin-right: 15px;
            height: 27px;
        }
        .optionPage #examPage input{
            position: absolute;
            left: 150px;
            width: 300px;
            height: 27px;
            padding-left: 10px;
        }
        .optionPage #examPage span{
            display: inline-block;
            width: 100px;
            height: 28px;
            border:2px solid gray;
            border-radius: 3px;
            margin: 0px 0px 0px 80px;
            text-align: center;
            line-height: 28px;
            cursor: pointer;
        }
        .optionPage #examPage span:hover{
            background-color: #3d6756;
            color: white;
        }
        .optionPage #examPage .dateStart{
            width: 140px;
        }
        .optionPage #examPage .dateEnd{
            width: 140px;
            margin-left: 160px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1 @click="optionPage1">{{title}}</h1>
        <div class="but1" @click="userExit">
            <a>{{exit}}</a>
        </div>
        <div class="but2">
            <a>{{account}}</a>
        </div>
    </div>
    <div id="main">
        <div class="optionBox">
            <ul>
                <li @click="optionPage2">{{useradmin}}</li>
                <li @click="optionPage3">{{examadmin}}</li>
                <li @click="optionPage4">{{classadmin}}</li>
                <li @click="optionPage5">{{backadmin}}</li>
            </ul>
            <hr>
        </div>
        <div class="optionPage">
            <h2>{{h2page}}</h2>
            <p>{{introduce}}</p>
        </div>
        <div class="optionPage">
            <input type="button" v-bind:value="value1" onclick="add()">
            <table>
                <tr><th>学号</th><th>账号</th><th>密码</th><th>姓名</th><th>班级</th></tr>
                <tr v-for="user in users">
                    <td>{{user.userid}}</td>
                    <td>{{user.account}}</td>
                    <td>{{user.password}}</td>
                    <td>{{user.name}}</td>
                    <td v-if="user.classid!=null">{{user.classid}}</td>
                    <td v-else></td>
                </tr>
            </table>
            <div id="addPage">
                <input type="text" placeholder="输入账号" v-model="account">
                <input type="text" placeholder="输入密码" v-model="password">
                <input type="text" placeholder="输入姓名" v-model="name">
                <input type="text" placeholder="输入班级" v-model="classid">
                <button @click="addUser">{{saveUser}}</button>
                <button onclick="cancel()">{{cancel}}</button>
            </div>
        </div>
        <div class="optionPage">
            <input type="button" v-bind:value="value2" onclick="eaxmAdd()">
            <div class="test">
                <table>
                    <tr><th>试卷编号</th><th>课程名称</th><th>考试时间(分)</th><th>删除</th></tr>
                    <tr v-for="paper in paperList">
                        <td :id="paper.pid">{{paper.pid}}</td>
                        <td>{{paper.em.pname}}</td>
                        <td>{{paper.em.examtime}}</td>
                        <td><span @click="deletePaper(paper.pid)">删除</span></td>
                    </tr>
                </table>
            </div>
            <div id="examPage">
                <div><h5>试卷名称</h5><input type="text" placeholder="输入试卷名称" v-model="examName"></div>
                <div><h5>所属课程</h5><input type="text" placeholder="请选择课程" list="courseList" id="cno">
                    <datalist id="courseList">
                        <option v-for="cour in courses">{{cour.cname}}</option>
                    </datalist>
                </div>
                <div><h5>命题人</h5><input type="text" disabled="disabled" v-model="teacherName" ></div>
                <div><h5>所属班级</h5><input type="text" placeholder="请选择班级" list="classList" id="classid">
                    <datalist id="classList">
<!--                        <option v-for="class in classes">{{class.classname}}</option>-->
                        <option v-for="cla in classes">{{cla.classname}}</option>
                    </datalist>
                </div>
                <div><h5>单选题数量</h5><input type="text" placeholder="输入试题数量" v-model="singleNumber"></div>
                <div><h5>判断题数量</h5><input type="text" placeholder="输入试题数量" v-model="decideNumber"></div>
                <div><h5>考试日期</h5><input type="datetime-local" placeholder="请输入开始日期" class="dateStart" id="examdate">
                    <input type="datetime-local" placeholder="请输入结束日期" class="dateEnd" id="examend">
                </div>
                <div><h5>考试时间</h5><input type="text" placeholder="输入考试时间 单位(min)" v-model="examTime"></div>
                <hr style="margin-top: 30px;margin-bottom:30px;color: #badde9;">
                <div><span><a @click="examCreate">生成试卷</a></span><span onclick="examCancel()">取消</span></div>
            </div>
        </div>
        <div class="optionPage">
            <h2>班级管理页面</h2>
            <p>这是第四个div</p>
        </div>
        <div class="optionPage">
            <h2>后台管理页面</h2>
            <p>这是第五个div</p>
        </div>
    </div>
    <script>
        var vm1 = new Vue({
            el:"#app",
            data:{
                title:"在线考试系统",
                account: "用户账号",
                exit:"退出",
            },
            methods:{
                userExit:function (){
                    axios.get("userExit").then(result=>{
                        location.href = result.data;
                    })
                },
                repage:function (){
                    axios.get("rePage").then(result=>{
                        this.account = result.data.account;
                    })
                }
            },
            mounted:function (){
                this.repage();
            }
        });
        var vm2 = new Vue({
            el:"#main",
            data:{
                useradmin:"用 户 管 理",
                examadmin:"试 卷 管 理",
                classadmin:"班 级 管 理",
                backadmin:"后 台 管 理",
                h2page:"光明正大考试系统",
                introduce:"本系统有莫氏独家出品,欢迎使用!",
                value1:"+添加学生",
                value2:"+添加试卷",
                users:[],
                courses:[],
                classes:[],
                paperList:[],
                account:"",
                password:"",
                name:"",
                classid:"",
                saveUser:"保存",
                cancel:"取消",
                examName:"",
                teacherName:"",
                examTime: "90",
                singleNumber:"",
                decideNumber:"",
            },
            methods:{
                //获取所有学生
                queryAllUser:function (){
                    axios.get("queryAllUser").then(result=>{
                        this.users = result.data;
                    })
                },
                //添加学生
                addUser:function (){
                    axios.get("addUser",{
                        params:{
                            account:this.account,
                            password: this.password,
                            name: this.name,
                            classid:this.classid,
                        }
                    }).then(result=>{
                        if (result.data==="OK"){
                            alert("保存成功!");
                            cancel();
                            this.queryAllUser();
                        }else {
                            alert("保存失败.")
                        }
                    })
                },
                //获取命题人
                repage:function (){
                    axios.get("rePage").then(result=>{
                        this.teacherName = result.data.account;
                    })
                },
                //获取所有课程
                queryAllCourse:function (){
                    axios.get("queryAllCourse").then(result=>{
                        this.courses = result.data;
                        return this.courses;
                    })
                },
                //获取所有班级
                queryAllClass:function (){
                    axios.get("queryAllClass").then(result=>{
                        this.classes = result.data;
                    })
                },
                //生成试卷
                examCreate:function (){
                    axios.get("createExam",{
                        params:{
                            pname: this.examName,
                            cno:$("#cno").val(),
                            userid:this.teacherName,
                            classid:$("#classid").val(),
                            singlenumber: this.singleNumber,
                            decidenumber: this.decideNumber,
                            examdate:$("#examdate").val(),
                            examend:$("#examend").val(),
                            examtime:this.examTime,
                        }
                    }).then(result => {
                        if (result.data==="OK"){
                            alert("创建试卷成功!");
                            examCancel();
                        }else {
                            alert("创建失败.")
                        }
                    })
                },
                //获取所有考试
                queryAllExam:function(){
                    axios.get("queryAllExam").then(result =>{
                        this.paperList = result.data;
                    })
                },
                //删除考试
                deletePaper:function (pid){
                    axios.get("deletePaper",{
                        params:{
                            pid:pid,
                        }
                    }).then(result =>{
                        if(result.data==="OK"){
                            alert("删除成功!")
                        }else {
                            alert("删除失败.")
                        }
                    })
                }
            },
            mounted:function (){
                this.queryAllUser();
                this.queryAllCourse();
                this.queryAllExam();
                this.queryAllClass();
                this.repage();
            }
        })

        /**
         * 添加学生
         */
        function add(){
            $("#addPage").show();
        }
        /**
         * 取消添加学生
         */
        function cancel(){
            $("#addPage").hide();
        }
        /**
         * 添加试卷
         */
        function eaxmAdd(){
            $("#examPage").show();
        }
        /**
         * 取消添加试卷
         */
        function examCancel(){
            $("#examPage").hide();
        }
        /**
         * 页面切换
         */
        function optionPage1(){
            $(".optionPage:nth-child(2)").show();
            $(".optionPage:nth-child(3)").hide();
            $(".optionPage:nth-child(4)").hide();
            $(".optionPage:nth-child(5)").hide();
            $(".optionPage:nth-child(6)").hide();
        }
        function optionPage2(){
            $(".optionPage:nth-child(2)").hide();
            $(".optionPage:nth-child(3)").show();
            $(".optionPage:nth-child(4)").hide();
            $(".optionPage:nth-child(5)").hide();
            $(".optionPage:nth-child(6)").hide();
        }
        function optionPage3(){
            $(".optionPage:nth-child(2)").hide();
            $(".optionPage:nth-child(3)").hide();
            $(".optionPage:nth-child(4)").show();
            $(".optionPage:nth-child(5)").hide();
            $(".optionPage:nth-child(6)").hide();
        }
        function optionPage4(){
            $(".optionPage:nth-child(2)").hide();
            $(".optionPage:nth-child(3)").hide();
            $(".optionPage:nth-child(4)").hide();
            $(".optionPage:nth-child(5)").show();
            $(".optionPage:nth-child(6)").hide();
        }
        function optionPage5(){
            $(".optionPage:nth-child(2)").hide();
            $(".optionPage:nth-child(3)").hide()
            $(".optionPage:nth-child(4)").hide();
            $(".optionPage:nth-child(5)").hide();
            $(".optionPage:nth-child(6)").show();
        }
    </script>
</body>
</html>